<template>
  <div class="entity-item" @click="goDetail">
    <div class="entity-item__img-wrapper">
      <div class="entity-item__unavailable" v-if="isEntityGoods && goods.sku_stock === '0'">
        <xe-image :src="t('goodsCommerce_replenish_img')" class="unavailable-img" />
      </div>
      <div class="entity-item__unavailable" v-if="goods.goods_type === 35 && goods.sku_stock === '0'">
        <xe-image :src="t('goodsCommerce_full_img')"
          class="unavailable-img" />
      </div>

      <div class="entity-item__img-inner">
        <xe-image :src="handleImgUrl(goods.goods_img)" class="goods-img" fit="blur" />
      </div>
      <div class="entity-item__tag" v-if="showGoodsTag">{{ goodsTag }}</div>
    </div>
    <div class="entity-item__content">
      <div class="entity-item__title">{{ goods.goods_name }}</div>
      <div class="entity-item__des">{{ descInfo }}</div>
      <div class="entity-item__amount">
        <div class="entity-item__price" v-if="showPrice"><span class="entity-item__price-currency">¥</span>{{
          goods.sku_price | priceFilter }}</div>
        <div class="entity-item__count" v-if="isEntityGoods">x1</div>
      </div>
    </div>
  </div>
</template>

<script>
import { jumpTool } from '@xiaoe/h5-jump-fe';
import { isELearnMP, isMP, isIos, isVideoDistribution, isKSMiniProgram } from "../../utils/checkEnv";
import { Image as XeImage } from '@xiaoe/vant';
import { replaceCDN } from "@xiaoe/js-tools/lib/replaceCDN";
import locale from "../../../../mixins/locale";

export default {
  name: 'entityItem',
  mixins: [locale],
  props: {
    goods: Object,
    default: {}
  },
  components: {
      XeImage
  },
  computed: {
    // 显示价格
    showPrice() {
      // ios 小程序不显示
      return !(isIos && (isMP || isELearnMP))
    },
    // 商品描述信息。不同商品类型有不同的描述
    descInfo() {
      const type = this.goods.goods_type;
      const specs_info = this.goods.specs_info;
      let desc = '';
      if (type === 21) {
        // 实物商品
        desc = (specs_info && specs_info.reduce((specifications, good) => {
          return !specifications ? good.attr_value : `${specifications};${good.attr_value}`;
        }, '')) || '';
      }
      if (type === 23) {
        // 超级会员
        const sVipInfo = this.goods.goods_specification;
        const standardMap = {
          1: this.t('goodsCommerce_seven_days'),
          2: this.t('goodsCommerce_one_month'),
          3: this.t('goodsCommerce_three_months'),
          4: this.t('goodsCommerce_six_months'),
          5: this.t('goodsCommerce_twelve_months'),
          6: sVipInfo.period + this.t('goodsCommerce_day'),
          7: sVipInfo.period + this.t('goodsCommerce_day'),
          8: this.t('goodsCommerce_permanent_avaliable')
        }
        desc = standardMap[sVipInfo.type] || '';
      }
      return desc;
    },
    // 是否是实物商品
    isEntityGoods() {
      return this.goods.goods_type === 21;
    },
    // 是否展示商品标签，实物商品可以设置为 展示/不展示
    showGoodsTag() {
      return !this.isEntityGoods || this.goods.goods_tag_is_show === 1;
    },
    // 商品标签
    goodsTag() {
      const typeMap = {
        0: this.t('All'),
        1: this.t('spuType_graphic'),
        2: this.t('spuType_audio'),
        3: this.t('spuType_video'),
        4: this.t('spuType_live'),
        5: this.t('spuType_member'),
        6: this.t('spuType_column'),
        7: this.t('spuType_community'),
        8: this.t('spuType_bigColumn'),
        9: this.t('spuType_event_management'),
        16: this.t('spuType_clock_in'),
        20: this.t('spuType_eBook'),
        21: this.goods.goods_tag,
        22: this.t('spuType_distribution'),
        23: this.t('spuType_svip'),
        25: this.t('spuType_training'),
        29: this.t('spuType_face_face'),
        31: this.t('spuType_small_class'),
        34: this.t('spuType_practice'),
        35: this.t('spuType_large_class'),
        50: this.t('spuType_training')
      }
      return typeMap[this.goods.goods_type] || '';
    },
  },
  filters: {
    priceFilter(val) {
      return (val / 100).toFixed(2);
    }
  },
  methods: {
    goDetail() {
      if (isVideoDistribution || isKSMiniProgram) return
      jumpTool.jumpTargetUrl({ url: this.goods.jump_url })
    },
    handleImgUrl(url) {
      return replaceCDN(url, { width: 200 })
    }
  }
};
</script>

<style lang="scss" scoped>
.entity-item {
  display: flex;

  &+.entity-item {
    margin-top: .32rem;
  }

  &__img-wrapper {
    position: relative;
    width: 2.4rem;
    min-width: 2.4rem;
    height: 1.35rem;
    border-radius: .08rem;
    overflow: hidden;
    border: .02rem solid #eee;
  }

  &__img-inner {
    position: relative;
    width: 100%;
    height: 100%;

    .goods-img {
      width: 100%;
      height: 100%;
      border-radius: .08rem;
    }
    
    ::v-deep .xiaoe-image__backdrop::before {
      filter: blur(20px);
    }
    ::v-deep .xiaoe-image__top-image {
      position: absolute;
      z-index: 1;
      backdrop-filter: none;
    }
}

  &__unavailable {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .08rem;
    background: rgba($color: #000000, $alpha: .5);

    .unavailable-img {
      width: 1.28rem;
      height: 1.16rem;
    }
  }

  &__tag {
    position: absolute;
    right: .08rem;
    bottom: .08rem;
    padding: .02rem .06rem;
    line-height: .24rem;
    font-size: .16rem;
    border-radius: .04rem;
    background: rgba($color: #000000, $alpha: .5);
    color: white;
    z-index: 2;
  }

  &__content {
    position: relative;
    flex: 1;
    margin-left: .24rem;
    overflow: hidden;
  }

  &__title {
    display: -webkit-box;
    margin: .04rem 0 .08rem;
    line-height: .4rem;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }

  &__des {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 95%;
    line-height: .34rem;
    color: #999999;
    font-size: 12px;
  }

  &__amount {
    position: absolute;
    bottom: .04rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: #999999;
  }

  &__price {
    font-size: .24rem;
  }

  &__price-currency {
    font-size: .2rem;
  }
}
</style>
